<template>
	<view class="tabbarContainer">
		<view class="inner" style="width: 100%;" :style="{'paddingBottom':bottom+'px'}">
			<view class="tabbar1 tabbarItem" @click="toPath('settled')">
				<image src="https://renovationcdn.jiachuangnet.com/tabbar/tasked.png"  class="tabbarIcon" v-if="index == 0"></image>
				<image src="https://renovationcdn.jiachuangnet.com/tabbar/task.png" class="tabbarIcon" v-else></image>
				<view style="width:50rpx;text-align: center;" :style="{color:index == 0 ?  '#13989a' :''}">首页</view>
			</view>
			<view class="tabbar1 tabbarItem" @click="toPath('talentPool')">
				<image src="https://renovationcdn.jiachuangnet.com/tabbar/tasked.png"  class="tabbarIcon" v-if="index == 1"></image>
				<image src="https://renovationcdn.jiachuangnet.com/tabbar/task.png" class="tabbarIcon" v-else></image>
				<view style="width:80rpx;text-align: center;" :style="{color:index == 1 ?  '#13989a' :''}">人才库</view>
			</view>
			<view class="tabbar2 tabbarItem" @click="toPath('mine')">
				<image src="https://renovationcdn.jiachuangnet.com/tabbar/mined.png"  class="tabbarIcon" v-if="index == 2"></image>
				<image src="https://renovationcdn.jiachuangnet.com/tabbar/mine.png" class="tabbarIcon" v-else></image>
				<view style="width:50rpx;text-align: center;" :style="{color:index == 2 ?  '#13989a' :''}">我的</view>
			</view>
			<!-- <image @click="addClick"  class="add" src="https://renovationcdn.jiachuangnet.com/tabbar/add.png"></image> -->
		</view>
		<!-- <view :style="{'height':bottom + 'px','width':'100%','background':'white'}">
		</view> -->
	</view>
</template>

<script>
	let app = getApp();
	export default{
		data(){
			return{
				bottom:app.globalData.safeBottom,
			}
		},
		created() {
			
		},
		mounted() {
		},
		props:{
			index:{
				type:[String,Number],
				default:0
			},
			loginType:{
				type:Number,
				require:true
			},
			isLogin:{
				type:Boolean,
				require:true
			}
		},
		methods:{
			toPath(url){
				console.log('点击',this.index,this.loginType);
				if(this.index == 0){
					
					 if(this.loginType === 5){
						 console.log('5');
						 //售后角色  首页显示售后列表
						 uni.reLaunch({
						 	url:'/pages/afterSales/index'
						 })
					 }else{
						 console.log('其他');
						 uni.reLaunch({
						 	url:'/pages/'+ url+'/index'
						 })
					 }
				}
				
			},
			addClick(){
				if(!this.isLogin) return uni.$u.toast('请先登录:)')
				if(this.loginType==0||this.loginType==1){
					uni.navigateTo({
						url:'/pages/createTask/index'
					})
				}else{
					uni.$u.toast('无管理员权限:)')
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.tabbarContainer{
		width: 100%;
		position: fixed;
		font-size: 24rpx;
		bottom:0;
		left:0;
		z-index: 10000;
		 // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}
	.inner{
		background-repeat: no-repeat;
		background-size:100% 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-top: 20rpx;
		background-color: #fff;
		// background-image: url('https://renovationcdn.jiachuangnet.com/tabbar/bg.png');
	}
	.add{
		width:94rpx;
		height: 94rpx;
		position: absolute;
		top:20rpx;
		left:50%;
		transform: translate(-50%,0);
	}
	.tabbarIcon{
		width: 50rpx;
		height: 55rpx;
	}
	.tabbar1,.tabbar2{
		// position: absolute;
		// top:70%;
		// transform: translate(0, -70%);
	}
	.tabbarItem{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.tabbar1 {
		// left:150rpx;
		
	}
	.tabbar2{
		// right: 150rpx;
	}
</style>